<div class="formEditor d-flex flex-column">
    <div class="toolbar pr-2">

        <!-- 设计器代码视图切换图标 -->
        <!-- <div class="viewTypePanel" *ngIf="formBasicService.envType==='designer'">
            <div class="active">
                <div>
                    <span class="f-icon f-icon-perspective_view"></span>设计器
                </div>
            </div>
            <div (click)="onClickCodeEditor()">
                <div>
                    <span class="f-icon f-icon-source-code"></span>代码
                </div>
            </div>
        </div> -->

        <!-- 实体、表单界面切换 -->
        <div class="showTypePanel d-flex border-left border-right">

            <div class="showTypeItem" (click)="onChangeShowDesigner('formDesigner')">
                <div [class.active]="showDesignerType==='formDesigner'">页面 </div>
            </div>

            <div class="showTypeItem" (click)="onChangeShowDesigner('vmDesigner')">
                <div [class.active]="showDesignerType==='vmDesigner'">模型 </div>
            </div>
            <div class="showTypeItem" (click)="onChangeShowDesigner('formSetting')">
                <div [class.active]="showDesignerType==='formSetting'">配置 </div>
            </div>

        </div>

        <!-- 设计时工具栏 -->
        <f-response-toolbar class="f-toolbar ml-auto col-7 px-0" [datas]="designerToolbarItems"
        (rtClickEvent)="designerrToolbarClickHandler($event)"></f-response-toolbar>



    </div>

    <div class="mainContent h-100" [hidden]="showDesignerType!=='formDesigner'">
        <app-form-designer></app-form-designer>
    </div>
    <div class="mainContent h-100" *ngIf="showDesignerType==='formSetting'">
        <app-form-settings></app-form-settings>
    </div>
    <div class="mainContent h-100" [hidden]="showDesignerType!=='vmDesigner'">
        <app-vm-designer #vmDesigner></app-vm-designer>
    </div>
</div>
